<!-- 拉新目标 -->
<template>
    <view>
        <view class="nav" :class="{'white': !toTop, 'color_22': toTop, 'bgwhite': toTop}">
            <view :style="{height: System.statusBarHeight + 'px'}"></view>
            <view class="p-left30" :style="{'line-height': navHeight + 'px'}">
                <text class="iconfont icon-xiangzuo size34 bold" @click="back()"></text>
                <text class="size34 bold m-left20">数据监控-拉新目标</text>
            </view>
        </view>
        <view class="top p-top160 p-left80 p-right80 white p-re" :style="{backgroundImage:'url(' + imgUrl + 'Uploads/private/dm_bg.png' + ')'}">
            <view class="d-flex f-column a-center m-bot20">
                <view class="d-flex m-bot10 p-left80">
                    <text class="size32 bold m-right60">今日拉新</text>
                    <u-icon name="reload" color="#fff" size="20" @click="initData()"></u-icon>
                </view>
                <view>
                    <text class="size40 bold">{{ pageData.todayRecruit || 0 }}</text>
                    <text class="size26">人</text>
                </view>
            </view>
            <view class="d-flex j-sb m-bot20 p-left35 p-right35">
                <view class="text-center">
                    <view class="size26 m-bot10">昨日拉新(人)</view>
                    <view class="size36 bold">{{ pageData.yesterdayRecruit || 0 }}</view>
                </view>
                <view class="text-center">
                    <view class="size26 m-bot10">客户数(人)</view>
                    <view class="size36 bold">{{ pageData.allRecruit || 0 }}</view>
                </view>
            </view>
            <view class="m-bot20">
                <view class="m-bot20">
                    <text class="size26">拉新目标</text>
                    <text class="label h7 bor_radius_6 padding2-14 m-left14">{{ pageData.percent || 0 }}%</text>
                </view>
                <u-line-progress :percentage="pageData.percent" activeColor="#FFE065" inactiveColor="#A9CFFF" height="6" :showText="false"></u-line-progress>
            </view>
            <view class="d-flex j-sb">
                <view>
                    <view class="size26 m-bot10">本月累计拉新(人)</view>
                    <view class="size28 bold">{{ pageData.monthRecruit || 0 }}</view>
                </view>
                <view class="text-right">
                    <view class="size26 m-bot10">本月拉新目标(人)</view>
                    <view class="size28 bold">{{ pageData.recruit_target || 0 }}</view>
                </view>
            </view>
            <view class="card bgwhite bor_radius_6 padding20 p-ab">
                <view class="d-flex j-sb a-center">
                    <text class="size30 color_22">拉新趋势</text>
                    <text class="iconfont icon-tongji size40 color_66" @click="toUrl('/privatePage/sale/newTrend')"></text>
                </view>
                <column height="200rpx" :raw-data="pageData.recruitTrend" :item-count="6"></column>
            </view>
        </view>
        <view class="padding30 m-top180">
            <!-- 新购 -->
            <view class="rebuy white">
                <view class="size34 color_22 bold m-bot30">新人新购</view>
                <view class="d-flex j-sb">
                    <view class="left bor_radius_6 padding30 p-re">
                        <view class="size26 m-bot4">新购金额(元)</view>
                        <view class="size36 bold">{{ pageData.day_money || 0 }}</view>
                        <view class="m-top10">
                            <text class="h6 m-right20">日环比:</text>
                            <text class="size26 m-right10">{{ pageData.day_money_percent || 0 }}%</text>
                            <text class="iconfont icon-jiantou_xiangxia bold" style="color: #5AE89A;" v-if="pageData.day_money_percent > 0"></text>
                            <text class="iconfont icon-jiantou_xiangshang bold" style="color: #FF5454;" v-if="pageData.day_money_percent < 0"></text>
                        </view>
                        <view class="m-top10">
                            <text class="h6 m-right20">周同比:</text>
                            <text class="size26 m-right10">{{ pageData.week_money_percent || 0 }}%</text>
                            <text class="iconfont icon-jiantou_xiangxia bold" style="color: #5AE89A;" v-if="pageData.week_money_percent > 0"></text>
                            <text class="iconfont icon-jiantou_xiangshang bold" style="color: #FF5454;" v-if="pageData.week_money_percent < 0"></text>
                        </view>
                        <image class="icon p-ab" :src="imgUrl + 'Uploads/private/dm_icon1.png'" mode="widthFix"></image>
                    </view>
                    <view class="right bor_radius_6 padding30 p-re">
                        <view class="size26 m-bot4">新购件数(件)</view>
                        <view class="size36 bold">{{ pageData.day_count || 0 }}</view>
                        <view class="m-top10">
                            <text class="h6 m-right20">日环比:</text>
                            <text class="size26 m-right10">{{ pageData.day_count_percent || 0 }}%</text>
                            <text class="iconfont icon-jiantou_xiangxia bold" style="color: #5AE89A;" v-if="pageData.day_count_percent > 0"></text>
                            <text class="iconfont icon-jiantou_xiangshang bold" style="color: #FF5454;" v-if="pageData.day_count_percent < 0"></text>
                        </view>
                        <view class="m-top10">
                            <text class="h6 m-right20">周同比:</text>
                            <text class="size26 m-right10">{{ pageData.week_count_percent || 0 }}%</text>
                            <text class="iconfont icon-jiantou_xiangxia bold" style="color: #5AE89A;" v-if="pageData.week_count_percent > 0"></text>
                            <text class="iconfont icon-jiantou_xiangshang bold" style="color: #FF5454;" v-if="pageData.week_count_percent < 0"></text>
                        </view>
                        <image class="icon p-ab" :src="imgUrl + 'Uploads/private/dm_icon2.png'" mode="widthFix"></image>
                    </view>
                </view>
            </view>
            <!-- 圆环 -->
            <view class="p-bot40 bor_bot_E8">
                <view class="size30 color_44 bold text-center m-top40 m-bot40">地区拉新比</view>
                <ring :raw-data="pageData.recruitAreaPie"></ring>
            </view>
            <view class="p-bot40 bor_bot_E8">
                <view class="size30 color_44 bold text-center m-top40 m-bot40">地区新购比</view>
                <ring :raw-data="pageData.recruitBuyPie"></ring>
            </view>
            <view class="p-bot40 bor_bot_E8 p-re">
                <view class="size30 color_44 bold text-center m-top40 m-bot40">来源渠道</view>
                <ring :raw-data="pieData"></ring>
                <view class="date p-ab d-flex a-center" @click="showSheet = true">
                    <text class="size26 color_66 m-right10">{{ currName }}</text>
                    <text class="iconfont icon-xiangxia size26 color_99 bold"></text>
                </view>
            </view>
            <!-- 上拉菜单 -->
            <u-action-sheet :actions="dateList" :show="showSheet" cancelText="取消" round="10" @close="showSheet = false" @select="handleSelect"></u-action-sheet>
            <view class="table bor_radius_6 m-top40 m-bot40" v-if="!noSource">
                <view class="head d-flex text-center">
                    <view class="size28 flex-1">渠道</view>
                    <view class="size28 flex-1">人数</view>
                    <view class="size28 flex-1">占比</view>
                </view>
                <view class="d-flex text-center line50" v-for="(item,index) in pieData" :key="index" :style="{color: color[index]}">
                    <view class="h6 flex-1">{{ item.way || item.name }}</view>
                    <view class="h6 flex-1">{{ item.value }}</view>
                    <view class="h6 flex-1">{{ item.percent }}%</view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
import column from '../components/column.vue'
import ring from '../components/ring.vue'
import { mapState } from 'vuex'
export default {
    data(){
        return {
            imgUrl: this.imgUrl,
            dateList: [
                { name: '今日', value: 'DayWay' },
                { name: '当月', value: 'MonthWay' },
                { name: '当季', value: 'SeasonWay' },
                { name: '当年', value: 'MonthYear' }
			],
            showSheet: false,
            currName: '当月',
            toTop: false,
            color: ["#1890FF","#91CB74","#FAC858","#EE6666","#73C0DE","#3CA272","#FC8452","#9A60B4","#ea7ccc"],
            pageData: '',
            pieData: []
        }
    },
    computed: {
        ...mapState(['System', 'navHeight']),
        noSource(){ // 无渠道
            return this.pieData.length == 1 && this.pieData[0].value == 0
        }
    },
    components: {
        column,
        ring
    },
    onLoad(){
        this.initData()
    },
    methods: {
        initData(){
            this.$showLoading('')
            this.$http.get({
                url: '/PrivateSphereApi/recruitTarget'
            }).then(res=>{
                if(res.code != 200) return this.$Toast(res.msg)
                this.pageData = res.data
                this.pieData = this.pageData.recruitMonthWayPie
                this.$hideLoading()
            })
        },
        handleSelect({name, value}){
            this.currName = name
            this.pieData = this.pageData[`recruit${value}Pie`]
            console.log(value, this.pieData)
        }
    },
    onPageScroll(e){
        if(e.scrollTop > 100){
            this.toTop = true
        } else{
            this.toTop = false
        }
    }
}
</script>

<style lang="scss" scoped>
.nav {
    width: 100%;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 99;
}
.top {
    height: 680rpx;
    background-repeat: no-repeat;
    background-size: 100% auto;
    .label {
        background: #FF794A;
    }
    .card {
        width: 690rpx;
        height: 280rpx;      
        box-shadow: 0rpx 4rpx 11rpx 1rpx rgba(0,0,0,0.1);
        left: 50%;
        margin-left: -345rpx;
        top: 580rpx;
    }
}
.rebuy {
    .left, .right {
        width: 330rpx;
        height: 240rpx;
    }
    .left {  
        background: linear-gradient(180deg, #0096FF, #86C2FF);
    }
    .right {
        background: linear-gradient(180deg, #7833FF, #B184FF);
    }
    .icon {
        width: 90rpx;
        right: 0;
        bottom: 10rpx;
    }
}
.bor_bot_E8 {   
    border-bottom: 1px solid #E8E8E8;
}
.date {
    right: 0;
    top: 0;
}
.table {
    width: 100%;
    // height: 250rpx;
    border: 1px solid #5277CA;
    .head {
        line-height: 60rpx;   
        background: #EFF4FF;
        color: #3C5489;
    }
}
</style>